<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>this is a page</title>

<style>
	html {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		background-image: linear-gradient(#f1f1f1,#000);

	}

	.canvasbig {
		position: absolute;
		left: calc(50% - 260px);
		top: calc(50% - 400px);
		width: 520px;
		height: 800px;
		
	}

	.canvasdiv {
		position: absolute;
		cursor: pointer;
		left: 160px;
		top: 500px;
		width: 200px;
		height: 53px;
		background-image: url(img/starting.png);
	}

	.none {
		display: none;
	}
</style>

</head>
<body>

<!-- <script src="js/circle.js"></script> -->

<div class="canvasbig">
	<div class="canvasdiv"></div>
	<canvas width="520" height="800" id="canvas1"></canvas>
</div>

<script src="js/index.js"></script>
<div style="text-align:center;">
this is end text
</div>
</body>
</html>